import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const TopBackgroundMeta: IPublicTypeComponentMetadata = {
  componentName: 'TopBackground',
  title: '顶部背景',
  category: '布局',
  group: '通用组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'TopBackground',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'width',
      propType: 'number',
      description: '宽度'
    },
    {
      name: 'height',
      propType: 'number',
      description: '高度'
    },
    {
      name: 'opacity',
      propType: 'number',
      description: '透明度'
    },
    {
      name: 'backgroundImage',
      propType: 'string',
      description: '背景图片路径'
    },
    {
      name: 'responsive',
      propType: 'bool',
      description: '响应式'
    },
    {
      name: 'children',
      propType: 'node',
      description: '子组件'
    }
  ],
  configure: {
    props: [
      // 基础配置
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础配置',
        },
        items: [
          {
            name: 'width',
            title: {
              label: '宽度',
              tip: '背景宽度(px)'
            },
            setter: 'NumberSetter'
          },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '背景高度(px)'
            },
            setter: 'NumberSetter'
          },
          {
            name: 'opacity',
            title: {
              label: '透明度',
              tip: '背景透明度 (0-1)'
            },
            setter: {
              componentName: 'NumberSetter',
              props: {
                min: 0,
                max: 1,
                step: 0.1
              }
            }
          },
          {
            name: 'backgroundImage',
            title: {
              label: '背景图片',
              tip: '背景图片路径'
            },
            setter: 'StringSetter'
          },
          {
            name: 'responsive',
            title: {
              label: '响应式',
              tip: '是否启用响应式布局'
            },
            setter: 'BoolSetter'
          }
        ]
      },
      // 样式配置
      {
        name: 'style',
        type: 'group',
        display: 'accordion',
        title: {
          label: '样式配置',
        },
        items: [
          {
            name: 'className',
            title: {
              label: '自定义类名',
              tip: '自定义CSS类名'
            },
            setter: 'StringSetter'
          },
          {
            name: 'style',
            title: {
              label: '自定义样式',
              tip: '自定义CSS样式'
            },
            setter: 'StyleSetter'
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true
    },
    component: {
      isContainer: true
    }
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '顶部背景',
    screenshot: '',
    schema: {
      componentName: 'TopBackground',
      props: {
        width: 3952,
        height: 186,
        opacity: 1,
        backgroundImage: 'http://localhost:8085/static/images/shouye/顶部背景.png',
        responsive: true
      },
      children: []
    }
  }
];

export default {
  ...TopBackgroundMeta,
  snippets
};